<template>
    <div class="about">
        <h1>This is an about page</h1>

        <!--
            obj         为 form 的 ref 默认为空
            size        为表单大小，用于控制该表单内组件的尺寸，medium / small / mini
            className   为自定义 class,多个以空格隔开，如： "class1 class2 ... ..."
            data        为 from 的数据字段，里面包含：
                inline      是否行内表单模式
                list        为表单项的数据
        -->
        <ua-form 
            obj="formObj" 
            size='small'     
            className=""  
            :data="form"
        ></ua-form>

        <!--
            obj         为 form 的 ref 默认为空
            
            data        表格数据源,数组类型
                [
                    [{...单行数据源...}]      单行数据项
                ]
            clna        表格外层div className
            tbcn        表格 className
            widh        表格 width
            heit        表格 height
            bder        表格 border
            spac        表格 cellspacing
            padd        表格 cellpadding
        -->
        <ua-infotable
            :data="infoTable"
            clna='className'
            tbcn='className'
            :widh="100"
            :heit="100"
            :bder="0"
            :spac="0"
            :padd="0"
        ></ua-infotable>

        <br>

    </div>
</template>
<style scoped>

</style>
<script>
    // import auForm from '@/components/HelloWorld.vue'
    export default {
        data(){
            return {
                form:{
                    inline: true,       //行内表单模式
                    list:[              //表单内容
                        /*
                                表单项类型
                                [
                                    'input',            //文本框
                                    'comInput',         //复合输入框 Compound input
                                    'downInput'         //类型输入框（下拉框 + input）
                                    'down',             //下拉框
                                    'btn',              //按钮 button
                                    'daterange',        //日期段，如：2010-10-10 - 2020-11-11
                                    'datetime',         //日期时间，如：2020-10-10 12:12:12
                                    'datetimerange',    //日期时间段，如：2020-10-10 12:12:12 - 2020-10-10 12:12:12
                                    'date',             //日期，如：2020-11-11
                                    'year',             //年份选择，如： 2020
                                    'monthrange',       //月份段，如： 2020-11 - 2020-12
                                    'month'             //月份，如： 1月
                                ]
                        */
                        {
                            tp:'null',      // tp = type               表单项类型 
                        },
                        {
                            nm:'名字',        // nm = name              表单内的 label 名称
                            pm:'userName',   // pm = prop name          表单项属性名
                            tp:'input',      // tp = type               表单项类型 
                            pe:'请输入名字',  // pe = placeholder        输入框的提示文案
                            va:'',           // va = value              输入框的值
                            db:false,        // db = disabled           是否禁用操作
                            cr:false,        // cr = clear              是否允许带清空按钮
                            pd:false,        // pd = password           是否开启密码输入模式
                            ia:'',           // ia = iconafter          文本框后置图标    'el-icon-date'
                            ib:'',           // ib = iconbefore         文本框前置图标     'el-icon-date'
                            xl:0,            // xl = maxLength          最大输入长度
                            ml:3,            // ml = minLength          最小输入长度
                            ff(){},          // ff = focus function     获取焦点触发事件 回调参数：(event: Event)    ff:this.focus
                            cf(){},          // cf = change function    内容变化后触发事件 回调参数：(value: string | number)   cf:this.change
                            ru:[],           // ru = rules              校验规则
                        },

                        {
                            bn:'-',        // bn = beforename           前置元素文案,
                            am:'-',        // an = aftername            后置元素文案,
                            pm:'userUrl',   // pm = prop name           表单项属性名
                            tp:'comInput',      // tp = type            表单项类型 
                            pe:'请输入名字',  // pe = placeholder        输入框的提示文案
                            va:'',           // va = value              输入框的值
                            db:false,        // db = disabled           是否禁用操作
                            cr:false,        // cr = clear              是否允许带清空按钮
                            pd:false,        // pd = password           是否开启密码输入模式
                            ia:'',           // ia = iconafter          文本框后置图标    'el-icon-date'
                            ib:'',           // ib = iconbefore         文本框前置图标     'el-icon-date'
                            xl:0,            // xl = maxLength          最大输入长度
                            ml:3,            // ml = minLength          最小输入长度
                            ff(){},          // ff = focus function     获取焦点触发事件 回调参数：(event: Event)    ff:this.focus
                            cf(){},          // cf = change function    内容变化后触发事件 回调参数：(value: string | number)   cf:this.change
                            ru:[ { required: true, message: '不能为空', trigger: 'blur' }],
                        },

                        {
                            nm:'告警来源',              // nm = name              表单内的 label 名称
                            tp:'down',                 // tp = type              表单项类型 
                            pm:'downName',              // pm = prop name        表单项属性名
                            db:false,                  // db = disabled           是否禁用操作
                            pe:'请输入案件名称',        // pe = placeholder        输入框的提示文案
                            al:false,                  // al = all               是否添加 全部 选项，value = ''
                            va:"",                     // va = value              输入框的值
                            cr:false,                  // cr = clear              是否允许带清空按钮
                            mt:false,                  // mt = multiple           是否允许多选（显示全部已选项）
                            ct:false,                  // ct = collapse-tags      是否允许合并多选（合并已选，只在 mt 为 true 时生效）
                            fr:true,                  // fr = filterable          是否允许搜索
                            ml:0,                     // ml = multiple-limit      控制选择数量，0 = 不限制
                            lt:[                      // lt = list                列表数据          
                                {
                                    name:'男',          // option 数据 name
                                    id:0,               // option 数据 value
                                    db:false            // 是否禁用当前 option，不设 db =  db : false
                                }, {
                                    dicItemName:'女',   // option 数据字典 name
                                    dicItemCode:1       // option 数据字典 value
                                }, 
                            ],
                            cg:this.alaLyFun,            // 监听回调，值变化就执行
                            ru:[],           // ru = rules              校验规则
                        },

                        {
                            nm:'选取',                  // nm = name                表单内的 label 名称
                            tp:'downInput',             // tp = type                表单项类型 
                            pm:'downInput',             // pm = prop name           表单项属性名
                            db:false,                   // db = disabled            是否禁用操作
                            pe:'请选择',                // pe = placeholder          输入框的提示文案
                            al:false,                   // al = all                 是否添加 全部 选项，value = ''
                            va:"",                      // va = value               输入框的值
                            cr:false,                   // cr = clear               是否允许带清空按钮
                            mt:false,                   // mt = multiple            是否允许多选（显示全部已选项）
                            ct:false,                   // ct = collapse-tags       是否允许合并多选（合并已选，只在 mt 为 true 时生效）
                            fr:true,                    // fr = filterable          是否允许搜索
                            ml:0,                       // ml = multiple-limit      控制选择数量，0 = 不限制
                            lt:[                        // option                   列表数据
                                {
                                    name:'男',          // option 数据 name
                                    id:0,               // option 数据 value
                                    db:false            // 是否禁用当前 option，不设 db =  db : false
                                }, {
                                    dicItemName:'女',   // option 数据字典 name
                                    dicItemCode:1       // option 数据字典 value
                                }, 
                            ],
                            cg:this.alaLyFun,            // cg = change             监听回调，值变化就执行
                            pn:'before',                 // 下拉框位置， before after ,不设默认 before

                            ipe:'请输入名字',  // ipe = input placeholder            输入框的提示文案
                            iva:'',           // iva = input value                  输入框的值
                            idb:false,        // idb = input disabled               是否禁用操作
                            icr:false,        // icr = input clear                  是否允许带清空按钮
                            ipd:false,        // ipd = input password               是否开启密码输入模式
                            iia:'',           // iia = input iconafter              文本框后置图标    'el-icon-date'
                            iib:'',           // iib = input iconbefore             文本框前置图标     'el-icon-date'
                            ixl:0,            // ixl = input maxLength              最大输入长度
                            iml:3,            // iml = input minLength              最小输入长度
                            iff(){},          // iff = input focus function         获取焦点触发事件 回调参数：(event: Event)    ff:this.focus
                            icf(){},          // icf = input change function        内容变化后触发事件 回调参数：(value: string | number)   cf:this.change
                            ru:[],           // ru = rules              校验规则
                        },
                    
                        {
                            nm:'选择日期时间段',                 // nm = name                label名称
                            tp:'datetimerange',                 // tp = type                表单项类型 
                            pm:'',                              // pm = prop name           表单项属性名
                            pes:'请选择开始日期间',              // pes = placeholder start   开始日期时间提示文案
                            pee:'请选择结束日期时间',            // pee = placeholder end     结束日期时间提示文案
                            va:'',                              // va = value               选择的值
                            cf:this.onSubmit,                   // cf = change function     监听值变化回调
                            dt:['00:00:00', '23:59:59'],        // dt = defaultTime         默认时间
                            ru:[],                              // ru = rules              校验规则
                            rs:'至'                             // rs = range-separator     选择范围时的分隔符,默认“-”
                        },

                        {
                            nm:'选择日期段',                     // nm = name                  label名称
                            tp:'daterange',                     // tp = type                  表单项类型 
                            pm:'',                              // pm = prop name             表单项属性名
                            pes:'请选择开始日期',                // pes = placeholder start    开始日期时间提示文案
                            pee:'请选择结束日期',                // pee = placeholder end      结束日期时间提示文案
                            va:'',                              // va = value                 选择的值
                            cf:this.onSubmit,                   // cf = change function       监听值变化回调
                            ru:[],                              // ru = rules              校验规则
                            rs:'至'                             // rs = range-separator       选择范围时的分隔符,默认“-”
                        },
                        
                        {
                            nm:'选择日期时间',                   // nm = name               label名称
                            tp:'datetime',                      // tp = type               表单项类型 
                            pm:'',                              // pm = prop name          表单项属性名
                            pe:'请选择开始日期',                 // pe = placeholder        日期时间提示文案
                            va:'',                              // va = value              选择的值
                            cf:this.onSubmit,                   // cf = change function    监听值变化回调
                            dt:'00:00:00',                      // dt = defaultTime        默认时间
                            ru:[],           // ru = rules              校验规则
                        },
                        
                        {
                            nm:'选择日期',                      // nm = name                label名称
                            tp:'date',                         // tp = type                表单项类型 
                            pm:'',                             // pm = prop name          表单项属性名
                            pe:'请选择日期',                    // pe = placeholder        日期时间提示文案
                            va:'',                             // va = value              选择的值
                            cf:this.onSubmit,                  // cf = change function    监听值变化回调
                            ru:[],                              // ru = rules              校验规则
                            fm:'yyyy 年 MM 月 dd 日'            // fm = format             文本框内显示格式，默认：yyyy - MM - dd
                        },
                        
                        {
                            nm:'选择年份',                      // nm = name                label名称
                            tp:'year',                          // tp = type                表单项类型 
                            pm:'',                              // pm = prop name           表单项属性名
                            pe:'请选择年份',                     // pe = placeholder         日期时间提示文案
                            va:'',                              // va = value               选择的值
                            cf:this.onSubmit,                   // cf = change function     监听值变化回调
                            ru:[],                              // ru = rules              校验规则
                            fm:'yyyy 年'                        // fm = format              文本框内显示格式，默认：yyyy
                        },
                        
                        {
                            nm:'选择月份段',                     // nm = name               label名称
                            tp:'monthrange',                    // tp = type               表单项类型 
                            pm:'',                              // pm = prop name          表单项属性名
                            pes:'请选择开始月份',                 // pes = placeholder start 开始月份提示文案
                            pee:'请选择结束月份',                 // pee = placeholder end   结束月份提示文案
                            va:'',                               // va = value             选择的值
                            cf:this.onSubmit,                    // cf = change function   监听值变化回调
                            fm:'MM 月',                          // fm = format            文本框内显示格式，默认：yyyy
                            ru:[],                              // ru = rules              校验规则
                            rs:'至'                              // rs = range-separator   选择范围时的分隔符,默认“-”
                        },
                        
                        {
                            nm:'选择月',                         // nm = name           label名称
                            tp:'month',                         // tp = type            表单项类型 
                            pm:'',                              // pm = prop name       表单项属性名
                            pe:'请选择月',                       // pe = placeholder    日期时间提示文案
                            va:'',                              // va = value           选择的值
                            cf:this.onSubmit,                   // cf = change function 监听值变化回调
                            ru:[],                              // ru = rules              校验规则
                            fm:'M 月'                           // fm = format          文本框内显示格式，默认：yyyy
                        },
                        
                        
                        // {text:'结束时间',type:'date',place:'请选择结束日期',val:'' },
                        {
                            nm:'查询',            // nm = name           label名称
                            tp:'btn',             // tp = type           表单项类型 
                            sz:"",                 // sz = size          按钮尺寸       medium / small / mini   默认为空
                            cf:this.onSubmit,    // cf = click            选择类型
                            rd:false,           // rd = round           是否半圆角
                            sy:'primary'         // sy = style            选择类型    默认primary / success / warning / danger / info / text
                        },
                        // {text:'重置',type:'btn',click:this.onCloseValue},
                    ],
                },
                infoTable:[
                    [
                        {tp:'null'},
                        {
                            tp:'text',      // tp = type         类型
                            nm:'名称',      // nm = name         标题（th）文案
                            vg:'',          // vg = valign       th 水平对其方式，详情：https://www.runoob.com/tags/att-th-valign.html
                            st:false,       // st = state        是否添加必填标识
                            ha:'right',     // ha = th align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            da:'',          // da = td align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            hw:"100",       // hw = th width     th宽度,number
                            dw:"",          // dw = td width     td宽度,number
                            hc:'',          // hc = th class      th class
                            dc:'',          // dc = td class      td class
                            hl:'',          // hl = th colspan    th 占用多少列
                            dl:'',          // dl = td colspan    td 占用多少列
                            hr:'',          // hr = th rowspan    td 占用多少行
                            dr:'',          // dr = td rowspan    td 占用多少行
                            va:'赵薇',       //va = value        内容（td）文案
                        },
                        {
                            tp:'down',      // tp = type         类型
                            nm:'名称',      // nm = name         标题（th）文案
                            vg:'',          // vg = valign       th 水平对其方式，详情：https://www.runoob.com/tags/att-th-valign.html
                            st:false,       // st = state        是否添加必填标识
                            ha:'right',     // ha = th align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            da:'',          // da = td align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            hw:"",       // hw = th width     th宽度,number
                            dw:"100",          // dw = td width     td宽度,number
                            hc:'',          // hc = th class      th class
                            dc:'',          // dc = td class      td class
                            hl:'',          // hl = th colspan    th 占用多少列
                            dl:'',          // dl = td colspan    td 占用多少列
                            hr:'',          // hr = th rowspan    td 占用多少行
                            dr:'',          // dr = td rowspan    td 占用多少行
                            va:'1',       //va = value        内容（td）文案

                            //指针对 tp：down 有效
                            lt:[            // lt = list          下拉框列表数据,
                                {name:'1',id:'1'},                  //自定义列表数据格式
                                {dicItemName:'2',dicItemCode:'2'},  //数据字典列表数据格式
                            ],
                            sz:'small',      // sz = size            //定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
                            cf(){}          //cf = change function  //点击切换值执行的回调 （id || dicItemCode）
                        },
                        {
                            tp:'radio',      // tp = type         类型
                            nm:'名称',      // nm = name         标题（th）文案
                            vg:'',          // vg = valign       th 水平对其方式，详情：https://www.runoob.com/tags/att-th-valign.html
                            st:false,       // st = state        是否添加必填标识
                            ha:'right',     // ha = th align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            da:'',          // da = td align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            hw:"",       // hw = th width     th宽度,number
                            dw:"",          // dw = td width     td宽度,number
                            hc:'',          // hc = th class      th class
                            dc:'',          // dc = td class      td class
                            hl:'',          // hl = th colspan    th 占用多少列
                            dl:'',          // dl = td colspan    td 占用多少列
                            hr:'',          // hr = th rowspan    td 占用多少行
                            dr:'',          // dr = td rowspan    td 占用多少行
                            va:'11',       //va = value        内容（td）文案

                            //指针对 tp：radio 有效
                            lt:[            // lt = list          下拉框列表数据,
                                {name:'11',id:'11'},                  //自定义列表数据格式
                                {name:'12',id:'22'},                  //自定义列表数据格式
                                // {dicItemName:'2',dicItemCode:'2'},  //数据字典列表数据格式
                            ],
                            cf(o){console.log(o);}          //cf = change function  //点击切换值执行的回调 （id || dicItemCode）
                        },
                        {
                            tp:'input',      // tp = type         类型
                            nm:'名称',      // nm = name         标题（th）文案
                            vg:'',          // vg = valign       th 水平对其方式，详情：https://www.runoob.com/tags/att-th-valign.html
                            st:false,       // st = state        是否添加必填标识
                            ha:'right',     // ha = th align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            da:'',          // da = td align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            hw:"",       // hw = th width     th宽度,number
                            dw:"200",          // dw = td width     td宽度,number
                            hc:'',          // hc = th class      th class
                            dc:'',          // dc = td class      td class
                            hl:'',          // hl = th colspan    th 占用多少列
                            dl:'',          // dl = td colspan    td 占用多少列
                            hr:'',          // hr = th rowspan    td 占用多少行
                            dr:'',          // dr = td rowspan    td 占用多少行
                            va:'赵薇',       //va = value        内容（td）文案

                            //指针对 tp：input 有效
                            ff(){},          // ff = focus function  //获取焦点后执行函数
                            db:false,        // db = disabled        //是否禁用
                            pe:'',        // pe = placeholder        //占位符文案
                            sz:'small'      // sz = size            //定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
                        },
                        {
                            tp:'textarea',      // tp = type         类型
                            nm:'名称',      // nm = name         标题（th）文案
                            vg:'',          // vg = valign       th 水平对其方式，详情：https://www.runoob.com/tags/att-th-valign.html
                            st:false,       // st = state        是否添加必填标识
                            ha:'right',     // ha = th align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            da:'',          // da = td align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            hw:"",       // hw = th width     th宽度,number
                            dw:"200",          // dw = td width     td宽度,number
                            hc:'',          // hc = th class      th class
                            dc:'',          // dc = td class      td class
                            hl:'',          // hl = th colspan    th 占用多少列
                            dl:'',          // dl = td colspan    td 占用多少列
                            hr:'',          // hr = th rowspan    td 占用多少行
                            dr:'',          // dr = td rowspan    td 占用多少行
                            va:'赵薇',       //va = value        内容（td）文案

                            //指针对 tp：input 有效
                            db:false,        // db = disabled        //是否禁用
                            rw:'1',
                            pe:'',        // pe = placeholder        //占位符文案
                            sz:'small'      // sz = size            //定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
                        },
                        {
                            tp:'date',      // tp = type         类型
                            nm:'日期',      // nm = name         标题（th）文案
                            vg:'',          // vg = valign       th 水平对其方式，详情：https://www.runoob.com/tags/att-th-valign.html
                            st:false,       // st = state        是否添加必填标识
                            ha:'right',     // ha = th align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            da:'',          // da = td align        垂直对其方式，详情：https://www.runoob.com/tags/att-th-align.html
                            hw:"",       // hw = th width     th宽度,number
                            dw:"200",          // dw = td width     td宽度,number
                            hc:'',          // hc = th class      th class
                            dc:'',          // dc = td class      td class
                            hl:'',          // hl = th colspan    th 占用多少列
                            dl:'',          // dl = td colspan    td 占用多少列
                            hr:'',          // hr = th rowspan    td 占用多少行
                            dr:'',          // dr = td rowspan    td 占用多少行
                            va:'',       //va = value        内容（td）文案

                            //指针对 tp：input 有效
                            cf(o){console.log(o)},          // cf = change function  //获取焦点后执行函数   (value)
                            pe:'',        // pe = placeholder        //占位符文案
                            sz:'small'      // sz = size            //定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
                        },
                    ]
                ]
            }
        },
        methods:{
            alaLyFun(){
                console.log(1)
            },
            focus(val){
                console.log('focus'+val);
            },
            change(o){
                console.log('change'+o)
            },
            onSubmit(){
                // console.log(this.form.list[9].va);
                // console.log(this);
                this.$children[0].$refs.formObj.validate(valid => {
                    if (valid) {
                        console.log("验证通过")
                    } else {
                        console.log("验证不通过")
                        return false
                    }
                })
            }
        },
    }
</script>
